<!-- Copyright 2018 The Flutter Architecture Sample Authors. All rights reserved. -->
<!-- Use of this source code is governed by the MIT license that can be found -->
<!-- in the LICENSE file. -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Flutter Architecture Samples</title>
  <link rel="shortcut icon" href="assets/favicon.ico"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" href="assets/favicon-32x32.png"
        sizes="32x32"/>
  <link rel="icon" type="image/png" href="assets/favicon-16x16.png"
        sizes="16x16"/>
  <link
    href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.css"
    rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <style>
    body {
      color: rgb(17, 17, 17);
    }

    .site-title {
      font-size: 4.2rem;
      margin-bottom: 0.25rem;
    }

    .button-blue {
      background-color: #3FBCCC;
      border-color: #3FBCCC;
    }

    a {
      color: #3FBCCC;
    }

    a:focus,
    a:hover,
    a:hover {
      color: #028A9C;
      border-color: #028A9C !important;
    }

    .button-blue:active,
    .button-blue:focus,
    .button-blue:hover {
      background-color: #028A9C;
      border-color: #028A9C;
    }

    .button-blue.button-outline:active,
    .button-blue.button-outline:focus,
    .button-blue.button-outline:hover {
      border-color: #028A9C;
      color: #028A9C;
    }

    .button-blue.button-clear,
    .button-blue.button-outline {
      background-color: transparent;
      color: #3FBCCC;
    }

    .button-blue.button-clear {
      border-color: transparent;
    }

    .site-subtitle {
      color: rgb(120, 120, 120);
      margin-bottom: 1.2rem;
    }

    .downloads {
      margin-bottom: 2.4rem;
    }

    h2 {
      color: rgb(70, 70, 70);
    }

    .site-header {
      margin-top: 3.2rem;
      margin-bottom: 1.2rem;
    }

    .container {
      max-width: 80rem;
    }

    .logo {
      max-width: 9rem;
      margin-right: 2.4rem;
      margin-bottom: 1.2rem;
      padding-left: 1.0rem;
    }

    .card {
      background-color: white;
      border-radius: 0.25rem;
      box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.25);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      min-height: 180px;
      padding: 2.4rem 2.4rem 1.2rem 2.4rem;
      border: solid transparent;
      border-bottom-color: transparent;
      border-bottom-color: #3FBCCC;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 4rem;
    }

    .site-title-container {
      flex-basis: min-content;
    }

    .screenshot {
      margin-bottom: 2.4rem;
    }

    .screenshot img {
      -webkit-box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.4);
      -moz-box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.4);
      box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.4);
    }

    /* Larger than mobile screen */

    @media (min-width: 40.0rem) {
      .screenshot {
        max-width: 16rem;
        float: right;
        margin-left: 2.4rem;
      }
    }

    /* Larger than tablet screen */

    @media (min-width: 80.0rem) {
    }

    /* Larger than desktop screen */

    @media (min-width: 120.0rem) {
    }

    .web-demo {
      border: 1px solid #3FBCCC;
      padding: 1px 3px;
      display: inline-block;
      border-radius: 3px;
      font-size: 0.8em;
      margin-left: 10px;
      text-transform: uppercase;
    }

    @media (prefers-color-scheme: dark) {
      body {
        background: #1E272C;
        color: #d9e5fa;
      }

      .card {
        background: #262f34;
      }

      .site-subtitle {
        color: #9fa6b3;
      }
    }
  </style>
</head>

<body>
<div class="container">
  <div class="row site-header">
    <div class="logo">
      <img src="assets/logo.png" alt="Flutter Architecture Samples Logo">
    </div>
    <div class="site-title-container">
      <h1 class="site-title">Flutter Architecture Samples</h1>
      <h5 class="site-subtitle">A gallery of app architectures</h5>
    </div>
  </div>

  <aside class="screenshot">
    <picture>
      <img src="assets/screenshot.png" alt="Screenshot of the app">
    </picture>
  </aside>
  <div class="content">
    <div class="description">
      <p>
        Flutter provides a lot of flexibility in deciding how to organize and
        architect your apps. While this
        freedom is very valuable,
        it can also lead to apps with large classes, inconsistent naming
        schemes, as well as mismatching or
        missing
        architectures. These types of issues can make testing, maintaining and
        extending your apps
        difficult.</p>
      <p>The Flutter Architecture Samples project demonstrates strategies to
        help solve or avoid these common
        problems.
        This project implements the same "Todos" app using different
        architectural concepts and tools.</p>
    </div>

    <div class="downloads">
      <a
        href="https://github.com/brianegan/flutter_architecture_samples/archive/master.zip"
        class="button button-blue">Download</a>
      <a href="https://github.com/brianegan/flutter_architecture_samples"
         class="button button-blue button-outline">Github</a>
    </div>

    <div class="card">
      <h3>Samples</h3>
      <ul>
        <li>
          <a
            href="https://github.com/brianegan/flutter_architecture_samples/tree/master/vanilla">Vanilla
            Lifting State Up
          </a>
          <a href="https://fas_vanilla.codemagic.app" class="web-demo">Web
            Demo</a>
        </li>
        <li>
          <a
            href="https://github.com/brianegan/flutter_architecture_samples/tree/master/inherited_widget">InheritedWidget</a>
          <a href="https://fas_inherited_widget.codemagic.app" class="web-demo">Web
            Demo</a>
        </li>
        <li>
          <a
            href="https://github.com/brianegan/flutter_architecture_samples/tree/master/change_notifier_provider">ChangeNotifier
            + Provider</a>
          <a href="https://fas_change_notifier_provider.codemagic.app"
             class="web-demo">Web
            Demo</a>
        </li>

        <li>
          <a
            href="https://github.com/brianegan/flutter_architecture_samples/tree/master/bloc_flutter">BLoC</a>
          <a href="https://fas_bloc_flutter.codemagic.app" class="web-demo">Web
            Demo</a>
        </li>
        <li>
          <a
            href="https://github.com/brianegan/flutter_architecture_samples/tree/master/bloc_library">Bloc
            Library</a>
          <a href="https://fas_bloc_library.codemagic.app" class="web-demo">Web
            Demo</a>
        </li>
        <li>
          <a
            href="https://github.com/brianegan/flutter_architecture_samples/tree/master/mobx">Mobx</a>
          <a href="https://fas_mobx.codemagic.app" class="web-demo">Web Demo</a>
        </li>
        <li>
          <a
            href="https://github.com/brianegan/flutter_architecture_samples/tree/master/redux">Redux</a>
          <a href="https://fas_redux.codemagic.app" class="web-demo">Web
            Demo</a>
        </li>
        <li>
          <a
            href="https://github.com/brianegan/flutter_architecture_samples/tree/master/simple_bloc_flutter">"Simple"
            BLoC Example</a>
          <a href="https://fas_simple_bloc.codemagic.app" class="web-demo">Web
            Demo</a>
        </li>
        <li>
          <a
            href="https://github.com/brianegan/flutter_architecture_samples/tree/master/mvi_flutter">MVI</a>
          <a href="https://fas_mvi.codemagic.app" class="web-demo">Web Demo</a>
        </li>
        <li>
          <a
            href="https://github.com/brianegan/flutter_architecture_samples/tree/master/states_rebuilder">states_rebuilder</a>
          <a href="https://fas_states_rebuilder.codemagic.app" class="web-demo">Web Demo</a>
        </li>
        <li>
          <a
            href="https://github.com/brianegan/flutter_architecture_samples/tree/master/built_redux">built_redux</a>
        </li>
        <li>
          <a
            href="https://github.com/brianegan/flutter_architecture_samples/tree/master/scoped_model">scoped_model</a>
        </li>
        <li>
          <a
            href="https://github.com/brianegan/flutter_architecture_samples/tree/master/firestore_redux">Redux
            and Firestore</a>
        </li>
        <li>
          <a
            href="https://github.com/brianegan/flutter_architecture_samples/tree/master/mvu">MVU</a>
        </li>
        <li>
          <a
            href="https://github.com/brianegan/flutter_architecture_samples/tree/master/mvc">MVC
            Example</a>
        </li>
        <li>
          <a
            href="https://github.com/brianegan/flutter_architecture_samples/tree/master/frideos_library">Frideos
            library</a>
        </li>
      </ul>
    </div>

    <div class="card">
      <h3>Supporting code</h3>
      <ul>
        <li>
          <a
            href="https://github.com/brianegan/flutter_architecture_samples/tree/master/integration_tests">Integration
            Tests</a>
        </li>
        <li>
          <a
            href="https://github.com/brianegan/flutter_architecture_samples/tree/master/example/todos_repository">Todos
            Repository</a>
        </li>
      </ul>
    </div>

    <div class="card">
      <h3>Contributors</h3>
      <ul>
        <li>
          <a href="https://github.com/brianegan">Brian Egan</a>
        </li>
        <li>
          <a href="https://github.com/davidmarne">David Marne</a>
        </li>
        <li>
          <a href="https://github.com/passsy">Pascal Welsch</a>
        </li>
        <li>
          <a href="https://github.com/kinggolf">Larry King</a>
        </li>
        <li>
          <a href="https://github.com/franklinharper">Frank Harper</a>
        </li>
        <li>
          <a href="https://github.com/p69">Pavel Shilyagov</a>
        </li>
        <li>
          <a href="https://github.com/mmcc007">Maurice McCabe</a>
        </li>
        <li>
          <a href="https://github.com/leocavalcante">Leo Cavalcante</a>
        </li>
        <li>
          <a href="https://github.com/AndriousSolutions">Greg Perry</a>
        </li>
        <li>
          <a href="https://github.com/felangel">Felix Angelov</a>
        </li>
        <li>
          <a href="https://github.com/frideosapps">Francesco Mineo</a>
        </li>
        <li>
          <a href="https://github.com/pavanpodila">Pavan Podila</a>
        </li>
        <li>
          <a href="https://github.com/kush3107">Kushagra Saxena</a>
        </li>
        <li>
          <a href="https://github.com/GIfatahTH">Mellati Fateh</a>
        </li>
      </ul>
    </div>

    <div class="copyright">
      <p> &copy; 2017
        <a href="https://github.com/brianegan">Brian Egan</a> and contributors.
      </p>
    </div>
  </div>
</div>
</body>

</html>
